<template>
  <div class="home">
    <div class="wrap">
      <div class="first-screen pb">
        <!-- 头部 -->
        <div class="first-screen-top" style="padding-left:4.151562rem;">
          <div class="first-screen-search">
            <a href class="btn"></a>
            <span class="btn-search">请输入商品名称</span>
          </div>
          <a href class="first-screen-adress">
            广州
            <i class="arrow"></i>
          </a>
        </div>
        <!-- 轮播图 -->
        <div class="first-screen-banner">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>
              <img
                src="https://img14.yiguoimg.com/d/items/2020/200618/9288740544719058_1125x652.jpg?w=1125&amp;h=652"
              />
            </van-swipe-item>
            <van-swipe-item>
              <img
                src="https://img11.yiguoimg.com/d/items/2020/200527/9288740446709947_1125x652.jpg?w=1125&amp;h=652"
              />
            </van-swipe-item>
            <van-swipe-item>
              <img
                src="https://img12.yiguoimg.com/d/items/2020/200512/9288740363806892_1125x652.jpg?w=1125&amp;h=652"
              />
            </van-swipe-item>
            <van-swipe-item>
              <img
                src="https://img13.yiguoimg.com/d/items/2020/200611/9288740513753291_1125x652.jpg?w=1125&amp;h=652"
              />
            </van-swipe-item>
            <van-swipe-item>
              <img
                src="https://img09.yiguoimg.com/d/items/2020/200604/9288740481870020_1125x652.jpg?w=1125&amp;h=652"
              />
            </van-swipe-item>
            <van-swipe-item>
              <img
                src="https://img10.yiguoimg.com/d/items/2020/200617/9288740542818513_1125x652.jpg?w=1125&amp;h=652"
              />
            </van-swipe-item>
          </van-swipe>
        </div>
        <!-- 导航栏 -->
        <div class="first-screen-menu clear" style="background-color: rgb(255, 255, 255);">
          <a
            href="javascript:;"
            class="one"
            v-for="item in data"
            @click="goto(item.hrefValue)"
            :key="item.index"
          >
            <i>
              <img :src="item.pictureUrl" />
            </i>
            <p class="one-title" style="color: rgb(51, 51, 51);">{{ item.navName}}</p>
          </a>
        </div>
        <!--  -->
        <div class="first-screen-ad">
          <img
            src="https://img10.yiguoimg.com/d/items/2020/200622/9710953027840214_1125x344.gif?w=1125&amp;h=344"
          />
        </div>
        <!--  -->
        <div class="first-screen-news">
          <i class="title"></i>
          <div class="swiper-container swiper-container-news swiper-container-vertical">
            <van-swipe style="height: 20px; left: 0px;" autoplay="2000" vertical>
              <van-swipe-item>营业资质公示，详情请点击查询</van-swipe-item>
              <van-swipe-item>移动/联通积分免费兑储值卡</van-swipe-item>
              <van-swipe-item>不良信息投诉与举报</van-swipe-item>
              <van-swipe-item>营业资质公示，详情请点击查询</van-swipe-item>
              <van-swipe-item>移动/联通积分免费兑储值卡</van-swipe-item>
            </van-swipe>
          </div>
        </div>
      </div>
      <!-- 重磅推荐 -->
      <div class="group-floor">
        <a href="javascript:;" class="floor-img">
          <img
            src="https://img12.yiguoimg.com/d/items/2020/200313/9288740091701357_1125x652.jpg?w=1125&amp;h=652"
          />
        </a>
        <!-- 列表商品 -->
        <div class="product-list clear noFloorImg">
          <div class="product-list-in">
            <div class="proitem" v-for="(item,index) in datalist" @click="onClick">
              <div class="pic">
                <a href="javascript:;" class="pic-a">
                  <img :src="item.pictureUrl" />
                </a>
                <div class="saletip">
                  <span v-if="item.saleSlogan != null">{{ item.saleSlogan }}</span>
                </div>
              </div>
              <div class="info">
                <p class="name">
                  <a href="javascript:;">{{ item.commodityName }}</a>
                </p>
                <div class="price">
                  <strong>¥{{item.commodityPrice}}</strong>
                  <i class="price-addcart"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 每日惊喜 -->
      <div class="one-image">
        <a href="javascript:;" class="link-img">
          <img
            src="https://img10.yiguoimg.com/d/items/2020/200203/9288739937003587_1125x137.jpg?w=1125&amp;h=137"
          />
        </a>
      </div>
      <div class="one-image">
        <a href="javascript:;" class="link-img">
          <img
            src="https://img09.yiguoimg.com/d/items/2020/200622/9288740562577622_1125x455.jpg?w=1125&amp;h=455"
          />
        </a>
      </div>
      <div class="one-image" v-for="(item,index) in listdata">
        <a href="javascript:;" class="link-img">
          <img :src=" item.adPictures[0].pictureUrl" />
        </a>
      </div>
      <div class="one-image" v-for="(item,index) in listdat">
        <a href="javascript:;" class="link-img">
          <img :src=" item.adPictures[0].pictureUrl" />
        </a>
      </div>
      <!-- 大模块化 -->
      <div class="group-floor" v-for="(item,index) in datalis">
        <a href="javascript:;" class="floor-img">
          <img :src="item.adPictures[0].pictureUrl" />
        </a>
        <!-- 列表商品-->
        <div class="product-list clear noFloorImg">
          <div class="product-list-in">
            <div class="proitem" v-for="(item,index) in datalis">
              <div class="pic">
                <a href="javascript:;" class="pic-a">
                  <img :src="item.commoditysComponentList[0].pictureUrl" />
                </a>
                <div class="saletip">
                  <span
                    v-if="item.saleSlogan != null"
                  >{{ item.commoditysComponentList[0].saleSlogan }}</span>
                </div>
              </div>
              <div class="info">
                <p class="name">
                  <a href="javascript:;">{{ item.commoditysComponentList[0].commodityName }}</a>
                </p>
                <div class="price">
                  <strong>¥{{item.commoditysComponentList[0].commodityPrice}}</strong>
                  <i class="price-addcart"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Nev />
  </div>
</template>

<script>
// @ is an alias to /src
import Nev from "@/components/Nev.vue";
export default {
  data() {
    return {
      datalist: [],
      datalis: [],
      listdata: [],
      listdat: [],
      data: "",
      isok: true,
      sorts: 1,
      imgurl:
        "https://img06.yiguoimg.com/d/web/170830/00911/152542/priceone.png"
    };
  },
  name: "Home",
  components: {
    Nev
  },
  methods: {
    goto(url) {
      //路由跳转
      this.$router.push({ path: "/product/productList", query: { url } });
    },

    onClick() {
      //控制价格排序的小图标高亮方向
      if (this.isok) {
        this.isok = !this.isok;
        this.sorts = 1;
        this.imgurl =
          "https://img07.yiguoimg.com/d/web/180508/01313/150959/pricethree.png";
      } else {
        this.sorts = 2;
        this.isok = !this.isok;
        this.imgurl =
          "https://img05.yiguoimg.com/d/web/180508/01313/150959/pricetwo.png";
      }
    },

    //
    async getdata() {
      //ajax获取数据
      let dataqqq = {
        Head: {
          cityCode: "512",
          cityId: "c8dbd17f-a8e0-43b1-b9ce-de1efdc2670e",
          districtId: "2252dc4d-0069-4c0f-b60f-21ce5607dd46",
          loginToken: "",
          token: "",
          version: "h5"
        },
        Body: {
          operationType: 0,
          previewTime: ""
        }
      };
      try {
        let datas = await this.$axios.post(
          `https://b2capigateway.yiguo.com/api/home/TemplateComponent/GetTemplateComponentInfo?appName=3000025`,
          dataqqq
        );
        this.datalist =
          datas.data.Data.templateComponentList[1].commoditysComponentList;
        this.data = datas.data.Data.templateComponentList[0].navComponentList;
        // console.log(this.data);
      } catch (err) {
        console.log(err);
      }
    },

    //每日惊喜获取数据1
    async getlist() {
      //ajax获取数据
      let dataqqq = {
        Head: {
          cityCode: "512",
          cityId: "c8dbd17f-a8e0-43b1-b9ce-de1efdc2670e",
          districtId: "2252dc4d-0069-4c0f-b60f-21ce5607dd46",
          loginToken: "",
          token: "",
          version: "h5"
        },
        Body: {
          homePageId: "4d2a61b6-682e-4bd2-9c26-ae5ef71982a3",
          operationType: 1,
          pageIndex: 1,
          previewTime: "",
          publishTime: ""
        }
      };
      try {
        let datas = await this.$axios.post(
          `https://b2capigateway.yiguo.com/api/home/TemplateComponent/GetTemplateComponentInfo?appName=3000025`,
          dataqqq
        );
        this.listdata = datas.data.Data.templateComponentList;
        // console.log(this.listdata);
      } catch (err) {
        console.log(err);
      }
    },

    //每日惊喜数据2
    async getlis() {
      //ajax获取数据
      let dataqqq = {
        Head: {
          cityCode: "512",
          cityId: "c8dbd17f-a8e0-43b1-b9ce-de1efdc2670e",
          districtId: "2252dc4d-0069-4c0f-b60f-21ce5607dd46",
          loginToken: "",
          token: "",
          version: "h5"
        },
        Body: {
          homePageId: "4d2a61b6-682e-4bd2-9c26-ae5ef71982a3",
          operationType: 1,
          pageIndex: 2,
          previewTime: "",
          publishTime: ""
        }
      };
      try {
        let datas = await this.$axios.post(
          `https://b2capigateway.yiguo.com/api/home/TemplateComponent/GetTemplateComponentInfo?appName=3000025`,
          dataqqq
        );
        this.listdat = datas.data.Data.templateComponentList;
        // console.log(this.listdat);
      } catch (err) {
        console.log(err);
      }
    },

    //大模块数据
    async getdat() {
      //ajax获取数据
      let dataqqq = {
        Head: {
          cityCode: "512",
          cityId: "c8dbd17f-a8e0-43b1-b9ce-de1efdc2670e",
          districtId: "2252dc4d-0069-4c0f-b60f-21ce5607dd46",
          loginToken: "",
          token: "",
          version: "h5"
        },
        Body: {
          homePageId: "4d2a61b6-682e-4bd2-9c26-ae5ef71982a3",
          operationType: 1,
          pageIndex: 3,
          previewTime: "",
          publishTime: "2020/06/23 14:23:27"
        }
      };
      try {
        let datas = await this.$axios.post(
          `https://b2capigateway.yiguo.com/api/home/TemplateComponent/GetTemplateComponentInfo?appName=3000025`,
          dataqqq
        );
        this.datalis = datas.data.Data.templateComponentList;
        // this.data =  datas.data.Data.templateComponentList[1].commoditysComponentList;
        // console.log(this.datalis);
      } catch (err) {
        console.log(err);
      }
    }
  },
  created() {
    this.getdata();
    this.getdat();
    this.getlist();
    this.getlis();
  }
};
</script>
<style lang="scss">
.wrap {
  width: 100%;
  padding: 2.34rem 0 4.529rem 0;
  background: #fafafa;
  .first-screen {
    padding-bottom: 0.566125rem;
    .first-screen-top {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      box-sizing: border-box;
      width: 100%;
      height: 2.34rem;
      padding: 0.320813rem 0.603875rem 0.320813rem 4.151562rem;
      background: linear-gradient(90deg, #39da85, #01b27a);
      .first-screen-search {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 1.6975rem;
        padding: 0 0.754812rem 0 2rem;
        border-radius: 1.45rem;
        background: #fff;
        .btn {
          position: absolute;
          top: 0.226438rem;
          left: 0.339625rem;
          width: 1.245625rem;
          height: 1.245625rem;
          background: url(//img07.yiguoimg.com/d/web/190515/00191/152133/home-search.png)
            no-repeat;
          background-size: 100% 100%;
        }
        .btn-search {
          position: absolute;
          top: 0.113125rem;
          left: 1.698375rem;
          width: 5.66125rem;
          height: 1.509375rem;
          line-height: 1.509625rem;
          font-size: 0.755rem;
          color: #999;
        }
      }
      .first-screen-adress {
        position: absolute;
        top: 0.603862rem;
        left: 0;
        width: 4.151562rem;
        height: 1.132031rem;
        line-height: 1.207731rem;
        text-align: center;
        font-size: 0.868687rem;
        color: #fff;
        .arrow {
          display: inline-block;
          width: 0.452344rem;
          height: 0.245312rem;
          margin: 0 0 0 0.301938rem;
          vertical-align: 0.17rem;
          background: url(//img05.yiguoimg.com/e/web/161222/01858/110628/arrow.png)
            no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  //轮播图
  .first-screen-banner {
    position: relative;
    .my-swipe {
      width: 100%;
      height: 13.671062rem;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      z-index: 1;
      .van-swipe-item {
        color: #fff;
        text-align: center;
        background-color: #39a9ed;
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  // 导航栏
  .first-screen-menu {
    background: #fff;
    background-size: 100% 100%;
    padding: 0.507813rem 1.00015rem;
    .one {
      float: left;
      width: 25%;
      padding: 0 0 0.905813rem;
      text-align: center;
      font-size: 0.6875rem;
      color: #333;
      i {
        display: block;
        width: 5.660938rem;
        padding: 0 0 0.066229rem;
        text-align: center;
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: 3.019325rem 3.019325rem;
        img {
          display: inline-block;
          width: 3.867969rem;
          height: 3.867969rem;
          vertical-align: middle;
          border: 0;
        }
      }
      .one-title {
        font-size: 0.805819rem;
        color: rgb(51, 51, 51);
      }
    }
  }
  .first-screen-ad {
    img {
      display: block;
      width: 100%;
      height: 7.170625rem;
    }
  }
  .first-screen-news {
    position: relative;
    box-sizing: border-box;
    height: 2.075625rem;
    padding: 0.415187rem 0.603875rem 0.415187rem 6.321688rem;
    background: #fff;
    .title {
      position: absolute;
      top: 0.660438rem;
      left: 0.997938rem;
      width: 4.26375rem;
      height: 0.83rem;
      background: url(//img06.yiguoimg.com/e/web/161222/018522/134216/news.png)
        no-repeat;
      background-size: 100% 100%;
      .title:after {
        position: absolute;
        top: -0.226438rem;
        left: 4.566725rem;
        width: 1px;
        height: 1.208125rem;
        content: "";
        -webkit-transform: scaleX(0.5);
        transform: scaleX(0.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        background: #e2e2e2;
      }
    }
    .swiper-container {
      width: 100%;
      height: 1.245625rem;
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      z-index: 1;
      .van-swipe-item {
        color: rgb(51, 51, 51);
        height: 1.25rem;
        line-height: 1.320956rem;
        font-size: 0.6875rem;
      }
    }
  }

  // 重磅推荐
  .group-floor {
    width: 100%;
    background: #fff;
    position: relative;
    .floor-img {
      width: 100%;
      height: 13.586875rem;
      display: inline-block;
      background: #d6d6d7
        url(//img02.yiguo.com/e/web/150930/00982/163525/placeholder_140x140.png)
        no-repeat 50%;
      img {
        width: 100%;
        height: 13.586875rem;
        vertical-align: middle;
        border: 0;
      }
    }
    .product-list {
      overflow: hidden;
      width: 100%;
      .product-list-in {
        overflow-x: scroll;
        overflow-y: hidden;
        box-sizing: border-box;
        width: 100%;
        padding-bottom: 0.377437rem;
        white-space: nowrap;
        padding-left: 1rem;
        .proitem {
          display: inline-block;
          background: #fff;
          margin-right: 0.622687rem;
          border-radius: 0.377416rem;
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
          vertical-align: middle;
          .pic {
            position: relative;
            .pic-a {
              display: inline-block;
              img {
                width: 7.755625rem;
                height: 7.755625rem;
                border-radius: 0.377416rem 0.377416rem 0 0;
              }
            }
            .saletip {
              position: absolute;
              bottom: 0;
              span {
                border: none;
                height: 1.244375rem;
                background: #fb3d3d;
                color: #fff;
                font-weight: 700;
                border-radius: 3.774156rem 6.246225rem 6.246225rem 0;
                padding: 0.301875rem 0.566125rem;
                font-size: 0.6225rem;
                line-height: 0.641437rem;
              }
            }
          }
          .info {
            box-sizing: border-box;
            width: 7.755625rem;
            text-align: left;
            padding-left: 0;
            padding: 0.5095rem;
            position: relative;
            .name {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              font-size: 0.6875rem;
              a {
                color: #333;
              }
            }
            .price {
              margin-top: 0.245625rem;
              height: 1.245625rem;
              line-height: 1.245625rem;
              font-size: 0.6875rem;
              color: #8d8a8a;
              strong {
                margin-right: 0.18875rem;
                font-size: 0.755rem;
                font-weight: bold;
                color: #fb3d3d;
              }
              .price-addcart {
                width: 1.245625rem;
                height: 1.245625rem;
                background: url(//img07.yiguoimg.com/d/web/190514/00193/172123/ksgw.png)
                  no-repeat;
                background-size: 100% 100%;
                float: right;
                border-radius: 50%;
                background-color: #01b27a;
              }
            }
          }
        }
      }
    }
  }
  // 每日惊喜
  .one-image {
    .link-img {
      display: inline-block;
      width: 100%;
      background: #d6d6d7
        url(//img02.yiguo.com/e/web/150930/00982/163525/placeholder_140x140.png)
        no-repeat 50%;
      img {
        width: 100%;
        vertical-align: middle;
        border: 0;
      }
    }
  }
}
</style>